<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
多文件上传：
<form enctype="multipart/form-data" id="formData">
    MultipartFile1:<input type="file" name="file1" id="fileName1"/><br>
    MultipartFile2:<input type="file" name="file2" id="fileName2"/><br>
    <div id="progress">0%</div>
    <input id="submit" type="button" placeholder="提交"/>
</form>
<script type="text/javascript" src="/jquery-3.4.1.js"></script>
<script type="text/javascript">
    (function () {
        $("#submit").click(function () {
            upFiles();
        })

        function upFiles() {
            var a = document.getElementById("formData");
            var formData = new FormData(a);
            $.ajax({
                url: 'upFileMany',
                data: formData,
                datatype: 'json',
                processData: false,
                contentType: false,
                async: true,
                type: 'POST',
                success: function (renponse) {
                    console.log("success"+renponse)
                },
                error: function (error) {
                    console.log("error"+error)
                },
                xhr: function () {
                    //ajax其实也就是对xhr的封装，这里自己设置底层的xhr
                    var xhr = $.ajaxSettings.xhr();
                    xhr.upload.addEventListener('progress', function (evt) {
                        var loaded = evt.loaded;
                        var total = evt.total;
                        var percent = loaded / total * 100;
                        $('#progress').html(percent.toFixed(2) + "%");
                        //toFixed小数位是2位
                    }, false);
                    return xhr;
                }
            })
        }
    })()
</script>
</body>
</html>